{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}
{% load mytags %}

<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

<div class="wrapper wrapper-content">
    <div class="row">               
        <div class="col-lg-12"> 
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>区服列表管理</h5>
                    <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">未启用 1</a>
                        </li>
                        <li><a href="#">未启用 2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                    </div>
                </div>

                <div class="ibox-content">
                    {% if data_log %}
                        <div class="alert alert-success text-center">{{ data_log }}</div>
                    {% endif %}
                    {% if error_log %}
                        <div class="alert alert-danger text-center">{{ error_log }}</div>
                    {% endif %}
                    <div class="row">
                        <div class="col-sm-12 m-b-xs">
                        {% for k,v in inc_area_plat_info.items %}
                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">{{k}} <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                {% for plat in v %}
                                  <li class="divider"></li>
                                    <li><a href="?area={{k}}&platform={{plat}}">{{plat}}</a></li>
                                {% endfor %}
                                </ul>
                            </div>
                        {% endfor %}
                        <div class="btn-group pull-right">
                          <a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">增加一行</a>
                        </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <form id="contents_form" name="contents_form" >
                            <table class="table table-striped table-bordered table-hover dataTables-example" id="editable" name="editable">
                                <thead>
                                    <tr>
                                        <th class="text-center"></th>
                                        <th class="text-center">地区</th>
                                        <th class="text-center">平台</th>
                                        <th class="text-center">区服名称</th>
                                        <th class="text-center">游戏服ID</th>
                                        <th class="text-center">游戏服IP</th>
                                        <th class="text-center">是否开放</th>
                                        <th class="text-center">服务器状态</th>
                                        <th class="text-center">端口</th>
                                        <th class="text-center">开服日期</th>
                                        <th class="text-center">大区</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for num in menu %}
                                    <tr class="text-center">
                                        <td data-editable='false' name="server_group" value={{num.server_name}}+{{num.server_id}}><input type="checkbox" data-toggle="checkbox" name="server_group" value='{{num.server_name}}+{{num.server_id}}'></td>
                                        <td data-editable='false'>{{num.area_name}}</td>
                                        <td data-editable='false'>{{num.platform}}</td>
                                        <td name="server_name">{{num.server_name}}</td>
                                        <td name="server_id">{{num.server_id}}</td>
                                        <td name="p_ip">{{num.p_ip}}</td>
                                        <td name="isopen">{{num.isopen}}</td>
                                        <td data-editable='false' name="status">{{ num.status|gamelist_state }}</td>
                                        <td data-editable='false' name="port">{{num.port}}</td>
                                        <td name="open_time">{{num.open_time}}</td>
                                        <td name="zone_id">{{num.zone_id}}</td>
                                    </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                            <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('contents_form')">全选/全不选
                            <div class="hr-line-dashed"></div>
                            <div class="pull-right input-group col-sm-3">
                                <select class="form-control" name="server_state">
                                    <option value="">下拉选择状态</option>
                                    <option value=0 >0-->空</option>
                                    <option value=2 >2-->新服</option>
                                    <option value=3 >3-->爆满</option>
                                    <option value=4 >4-->维护</option>
                                    <option value=5 >5-->推荐</option>
                                </select>
                                <span class="input-group-btn"> <button type="submit" class="btn btn-info" form="contents_form" formmethod="POST" formaction="/inc/server_list_edit/?platform={{platform}}&area={{area_name}}">一键修改状态</button> </span>
                            </div>

                            <!--<button type="submit" class="btn btn-primary btn-sm dim" form="contents_form" formmethod="post" formaction="/inc/server_list_edit/?platform={{platform}}&area={{area_name}}&action=add">添加</button>-->
                            <button type="button" id="alter_button" class="btn btn-primary btn-sm dim" name="alter_button"  onclick="alter('contents_form')">添加</button>
                            <button type="button" class="btn btn-danger btn-sm dim" data-toggle="modal" data-target="#del-server" data-whatever="@mdo" onclick="del_server()" >删除</button>
                            <button type="button" id="alter_button" class="btn btn-warning btn-sm dim" name="alter_button"  onclick="alter('contents_form')">修改</button><br>
                        </form>
                        <div class="hr-line-dashed"></div>
                        <button type="submit" class="btn btn-primary dim" target="_blank" form="contents_form" formmethod="POST" formaction="/inc/server_list_print/?platform={{platform}}&area={{area_name}}">生成区服列表文件</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="del-server">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="gridSystemModalLabel" align="center">删除区服列表</h4>
        </div>
        <div class="modal-body">
            <div class="container-fluid" align="center">
                <p id="open_list"></p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" name="switch" value="del" form="contents_form" formmethod="post" formaction="/inc/server_list_edit/?platform={{platform}}&area={{area_name}}&action=delete">确定</button>
            <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
  function del_server(){
        var opendata=new Array();
        var show=document.getElementsByName('server_group');

        for(var i=0;i<show.length;i++){
            if(show[i].checked==true){
            opendata[i]=show[i].value+'<br>';
        }
    }
  for(var i=0;i<opendata.length;i++){
                if(opendata[i] == "" || typeof(opendata[i]) == "undefined")
                {
                        opendata.splice(i,1);
                        i = i-1;
                }
        }
        document.getElementById("open_list").innerHTML=opendata;
}
</script>

<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.tableTools.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#editable').editableTableWidget({editor: $('<textarea>')});
    });

    function alter(form) {
        selectData = GetTable();
        console.log(selectData[0])
        if (selectData[1] != 0) {
            $.ajax({
                type: "GET",
                url: "/inc/server_list_edit/?platform={{platform}}&area={{area_name}}&action=modify",
                data: {"editable": selectData[0], "len_table": selectData[1]},
                success: function (data) {
                    alert("修改成功");
                    window.open("/inc/server_list/?area={{ area_name }}&platform={{ platform }}", "_self");
                error: window.open("/inc/server_list/?area={{ area_name }}&platform={{ platform }}", "_self");
                }
            });
        }
    };

    $(document).ready(function() {
            $('.dataTables-example').dataTable({
                responsive: true,
                "dom": 'T<"clear">lfrtip',
                "iDisplayLength":50,
                "tableTools": {
                    "aButtons":["copy","xls",'print'],
                    "sSwfPath": "/static/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                }
            });
        });


    function fnClickAddRow(){
        var tr="<tr class='text-center'>\
              <td data-editable='false' name='server_group' value='new'><input type='checkbox' name='check'/></td>\
              <td data-editable='false'>{{area_name}}</td>\
              <td data-editable='false'>{{platform}}</td>\
              <td name='server_name'></td>\
              <td name='server_id'></td>\
              <td name='p_ip'></td>\
              <td name='isopen'>false</td>\
              <td data-editable='false' name='status'>0</td>\
              <td data-editable='false' name='port'>10100</td>\
              <td name='open_time'></td>\
              <td name='zone_id'>1</td>\
            </tr>";
　  　　 $("#editable").append(tr);　　
        $('#editable').editableTableWidget({editor: $('<textarea>')});
    }

</script>

{% endblock %}